/*
 * Copyright (C) 2013 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

@import 'base/environment';

/*
@styleguide Item Groups Condensed

<br/>
### tl;dr

  - Item groups come either `item-group` or `item-group-condensed` styles
  - The `item-group` style is for draggable items and `item-group-condensed` is for items that are not draggable
  - The outer `item-group-container` div is optional, and adds a background color with a dashed line between groups

<br/>

```html
<div class="item-group-container">

  <div class="item-group-condensed">
    <div class="ig-header">
      <h2 class="ig-header-title element_toggler"
         aria-controls="cond_group_1"
         aria-expanded="true"
         aria-label="Item Group Header toggle item visibility"
         role="button">
        <i class="icon-mini-arrow-down"></i> Item Group Header
      </h2>
    </div>

    <ul class="ig-list" id="cond_group_1">
      <li>
        <div class="ig-row">
          <div class="ig-row__layout">
            <div class="ig-type-icon" aria-hidden="true">
              <i class="icon-assignment"></i>
            </div>
            <div class="ig-info">
              <a href="#" class="ig-title">
                Some Assignment
              </a>
              <div class="ig-details">
                <div class="ig-details__item"><b>Due</b> Nov 4, 2012</div>
                <div class="ig-details__item"><b>Available</b> Nov 1</div>
                <div class="ig-details__item">10 pts</div>
              </div>
            </div>
            <div class="ig-admin">
              <span class="publish-icon publish-icon-published" data-tooltip title="Unpublish">
                <i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
              </span>

              <div class="inline-block">
                <a class="al-trigger al-trigger-gray" href="#" role="button">
                  <i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
                  <span class="screenreader-only"><%= t('manage', 'Manage') %></span>
                </a>
                <ul class="al-options">
                  <li><a href="#">Edit</a></li>
                  <li><a href="#">Delete</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </li>

      <li>
        <div class="ig-row ig-published">
          <div class="ig-row__layout">
            <div class="ig-type-icon" aria-hidden="true">
              <i class="icon-assignment"></i>
            </div>
            <div class="ig-info">
              <a href="#" class="ig-title">
                Some Assignment
              </a>
              <div class="ig-details">
                <div class="ig-details__item"><b>Due</b> Nov 4, 2012</div>
                <div class="ig-details__item"><b>Available</b> Nov 1</div>
                <div class="ig-details__item">10 pts</div>
              </div>
            </div>
            <div class="ig-admin">
              <span class="publish-icon publish-icon-published" data-tooltip title="Unpublish">
                <i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
              </span>

              <div class="inline-block">
                <a class="al-trigger al-trigger-gray" href="#" role="button">
                  <i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
                  <span class="screenreader-only"><%= t('manage', 'Manage') %></span>
                </a>
                <ul class="al-options">
                  <li><a href="#">Edit</a></li>
                  <li><a href="#">Delete</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </li>

      <li>
        <div class="ig-row">
          <div class="ig-row__layout">
            <div class="ig-type-icon" aria-hidden="true">
              <i class="icon-assignment"></i>
            </div>
            <div class="ig-info">
              <a href="#" class="ig-title">
                Some Assignment
              </a>
              <div class="ig-details">
                <div class="ig-details__item"><b>Due</b> Nov 4, 2012</div>
                <div class="ig-details__item"><b>Available</b> Nov 1</div>
                <div class="ig-details__item">10 pts</div>
              </div>
            </div>
            <div class="ig-admin">
              <span class="publish-icon publish-icon-published" data-tooltip title="Unpublish">
                <i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
              </span>

              <div class="inline-block">
                <a class="al-trigger al-trigger-gray" href="#" role="button">
                  <i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
                  <span class="screenreader-only"><%= t('manage', 'Manage') %></span>
                </a>
                <ul class="al-options">
                  <li><a href="#">Edit</a></li>
                  <li><a href="#">Delete</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>

  <div class="item-group-condensed">
    <div class="ig-header">
      <h2 class="ig-header-title element_toggler"
         aria-controls="cond_group_2"
         aria-expanded="true"
         aria-label="Item Group Header toggle item visibility"
         role="button">
        <i class="icon-mini-arrow-down"></i> Item Group Header
      </h2>
    </div>
    <ul class="ig-list" id="cond_group_2">
    <li>
      <div class="ig-row">
        <div class="ig-row__layout">
          <div class="ig-type-icon" aria-hidden="true">
            <i class="icon-assignment"></i>
          </div>
          <div class="ig-info">
            <a href="#" class="ig-title">
              Some Assignment
            </a>
            <div class="ig-details">
              <div class="ig-details__item"><b>Due</b> Nov 4, 2012</div>
              <div class="ig-details__item"><b>Available</b> Nov 1</div>
              <div class="ig-details__item">10 pts</div>
            </div>
          </div>
          <div class="ig-admin">
            <span class="publish-icon publish-icon-published" data-tooltip title="Unpublish">
              <i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
            </span>

            <div class="inline-block">
              <a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" href="#">
                <i class="icon-settings"></i>
                <i class="icon-mini-arrow-down"></i>
                <span class="screenreader-only">Settings</span>
              </a>

              <ul id="content-1" class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="content-2">
                <li role="presentation">
                  <a href="#" class="icon-edit" id="content-2" tabindex="-1" role="menuitem" title="Edit">Edit</a>
                </li>
                <li role="presentation">
                  <a href="#" class="icon-trash" id="content-3" tabindex="-1" role="menuitem" title="Delete this module">Delete</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </li>
    </ul>
  </div>

  <div class="item-group-condensed">
    <div class="ig-header">
      <h2 class="ig-header-title element_toggler"
         aria-controls="cond_group_3"
         aria-expanded="true">
        <i class="icon-mini-arrow-down"></i> Item Group Header
      </h2>
    </div>
    <ul class="ig-list" id="cond_group_3">
      <li>
        <div class="ig-row ig-row-empty">
          <div class="ig-empty-msg">
            No assignments in this Group
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
```

*/

.item-group-container {
  background: $lightBackground;
  padding-bottom: $ic-sp*6;
  border: 1px solid $ic-border-light;
  border-top: none;

  .item-group-condensed {
    border-bottom: 1px dashed $ic-border-dark;
    padding: $ic-sp*1.5;
  }

  .item-group-condensed:last-child,
  .item-group-condensed:last-of-type,
  .item-group-condensed.last {
    border-bottom: 0;
  }

  .ig-list {
    margin-top: 0;
  }

  .ig-list li {
    margin: 0;
  }
}

.item-group-condensed {
  padding: 9px;

  .ig-header {
    padding-left: 0px;
  }

  .ig-row {
    border-top-width: 0;
    border-radius: 0;
    background: #fff;
    border-bottom: 1px solid $ic-border-light;
  }

  .ig-list li:first-child,
  .ig-list li:first-of-type {
    margin-top: $ic-sp/2;
  }

  .ig-list li:first-child .ig-row,
  .ig-list li:first-of-type .ig-row,
  .first_visible .ig-row {
    border-top-left-radius: $baseBorderRadius;
    border-top-right-radius: $baseBorderRadius;
    border-top: 1px solid $ic-border-light;
    &.ig-row-empty { border-top: 1px solid #dcdee0; }
  }

  .ig-list li:last-child .ig-row,
  .ig-list li:last-of-type .ig-row,
  .last_visible .ig-row {
    border-bottom-left-radius: $baseBorderRadius;
    border-bottom-right-radius: $baseBorderRadius;
    &.ig-row-empty { border-bottom: 1px solid $ic-border-light; }
  }

  .item-group-expandable {
    border-radius: $baseBorderRadius;
    background-color: $ic-color-light;
    border: 1px solid $ic-border-light;

    .ig-list {
      li { margin: 0; }
      li .ig-row {
        background: none;
        border: none;
        border-radius: inherit;
      }

      li:last-child .ig-row,
      li:last-of-type .ig-row {
        box-shadow: none;
      }

      li:last-child .ig-sublist,
      li:last-of-type .ig-sublist {
        border-bottom-left-radius: $baseBorderRadius;
        border-bottom-right-radius: $baseBorderRadius;
        border-bottom: none;
      }
    }

    li:not(:last-child) .ig-sublist,
    li:not(:last-of-type) .ig-sublist{
      box-shadow: inset 0 1px 0 #f0f0f0, inset 0 -1px 0 #f0f0f0;
    }

    .ig-button {
      white-space: nowrap;
    }

    .ig-sublist {
      background-color: $ic-bg-light-neutral;
      box-shadow: inset 0 1px 0 #f0f0f0;
      border-top: 1px solid $ic-border-light;
      border-bottom: 1px solid $ic-border-light;

      ul {
        list-style:none;
        padding: 0;
        margin: 0;

        li:first-child,
        li:first-of-type {
          margin-top: 0px;
        }

        li:last-child .ig-row,
        li:last-of-type .ig-row {
          border-bottom: none;
        }

        li .ig-row {
          box-shadow: none;
          margin: 0;
          border-bottom: 1px dotted #e1e2e3;
          padding-top: $ic-sp/2;
          padding-bottom: $ic-sp/2;
          padding-left: $ic-sp*2.5;
          .ig-title {
            color: $ic-font-color-dark;
          }
        }
      }
    }
  }

}
